<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Button',
        remark: '按钮',
        attrs: [{
          name: 'text',
          type: 'String',
          remark: '文本',
        }, {
          name: 'icon',
          type: 'String',
          remark: '图标',
          option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
        }, {
          name: 'focus-icon',
          type: 'String',
          remark: '聚焦状态时图标',
          option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
        }, {
          name: 'target',
          type: 'String',
          remark: '按钮指向的聚焦目标元素',
          option: '目标元素的key',
        }, {
          name: 'closable',
          type: 'Boolean',
          remark: '是否显示关闭按钮',
          option: '',
          default: ''
        }, {
          name: 'disabled',
          type: 'Boolean',
          remark: '是否禁用',
          option: '',
          default: ''
        }, {
          name: 'arrow-icon',
          type: 'String',
          remark: '箭头图标',
          option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
        }, {
          name: 'drop-icon',
          type: 'String',
          remark: '当弹出下拉框时，按钮的图标',
          option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
        }, {
          name: 'drop-props',
          type: 'Object',
          remark: '下拉菜单Menu的属性。具体参数请参考Menu组件',
        }, {
          name: 'hover-show-drop',
          type: 'Boolean',
          remark: '是否在鼠标hover时展示下拉菜单',
        }, {
          name: 'show-arrow-icon',
          type: 'Boolean',
          remark: '当有下拉选项时，是否显示箭头图标',
          option: '',
          default: 'true',
        }, {
          name: 'vertical',
          type: 'Boolean',
          remark: '图片文本是否纵向排列',
          default: 'true',
        }],
        events: [{
          name: 'click:close',
          remark: '点击关闭按钮时触发',
          option: '(event: Event)',
        }],
        slots: [{
          name: 'default',
          remark: '显示下拉菜单',
          option: 'Button,Split'
        }],
      }
    }
  }
</script>
